import React, { useEffect } from 'react';
import * as commonUtil from "../../../utils/commonUtil";
import TextChatDialog from '../../../components/textChatDialog/TextChatDialog';
import useAdvanceState from "../models/advanceState";
import * as advanceService from '../services/advanceService';
import config from "../../../config/config";

const RetrievalPage = (props) => {

    const {
        loading, setLoading,
        textChatMessages, setTextChatMessages,
        documentTotal, setDocumentTotal,
        documentList, setDocumentList,
        selectedPattern, setSelectedPattern,
        selectedDocument, setSelectedDocument,
        focusBlurFlag, setFocusBlurFlag,
        completeStatus, setCompleteStatus,
        workflowGraph, setWorkflowGraph,
        onSendChat, loadDocumentList
    } = useAdvanceState();

    useEffect(() => {
        loadDocumentList({ current_page: "0", page_size: 10 });
    }, []);

    const onSendChatText = () => {
        let domInput = document.getElementById("textChatInput");
        if (!domInput.value) {
            return;
        }

        setAdvanceLoading(true);
        textChatMessages.push({ id: commonUtil.generateUUID(), type: "user", think: "", answer: domInput.value });
        const msgId = commonUtil.generateUUID();
        textChatMessages.push({ id: msgId, type: "ai", think: "", answer: "正在思考中。。。。。。" });
        setTextChatMessages(textChatMessages);

        const numbers = selectedDocuments.join(",")
        advanceService.retrievalAdvance({ msgId, prompt: domInput.value, numbers, ragPattern: selectedRAGPattern }).then(res => {
            if (res.code == 200) {
                const data = res.data?.chain_result;
                let newTextObj = textChatMessages.find(item => msgId == item.id);
                if (data.indexOf("<think>") > -1) {
                    newTextObj.think = newTextObj.think + res;
                }
                newTextObj.answer = data;
                setTextChatMessages(textChatMessages);
                setAdvanceLoading(false);
                domInput.value = "";
            }
        });
    }

    const documentOptions = documentList.map(item => {
        let optionObj = new Object();
        optionObj.label = item.document_name;
        optionObj.value = item.library_number;
        optionObj.desc = item.document_name;
        return optionObj;
    });

    const patternOptions = config.rag_advances.map(item => {
        let optionObj = new Object();
        optionObj.label = item.key + "（" + item.name + "）";
        optionObj.value = item.key;
        optionObj.disabled = item.disabled;
        return optionObj;
    });

    const textChatDialogProps = {
        loading,
        libraryVisible: false,
        pageSource: "advance",
        textChatMessages,
        setTextChatMessages,
        selectedPattern,
        focusBlurFlag,
        completeStatus,
        patternOptions,
        documentOptions,
        workflowGraph,
        selectDocument: setSelectedDocument,
        focusBlurTextArea: setFocusBlurFlag,
        selectPattern: (pattern) => {
            setSelectedPattern(pattern);

            const image_name = "RAG_" + pattern + "_Workflow.png";
            const image_path = "D:/Downloads/taixu/images/agentics/" + image_name;
            fetch('http://localhost:5000/common/download_image?image_path=' + image_path).then(res => res.blob()).then(res => {
                setWorkflowGraph(URL.createObjectURL(res));
            });
        },
        onSendChat: (values, query) => onSendChat(values, query)
    }

    return (
        <div style={{ width: "100%", height: "100%" }}>
            <TextChatDialog { ...textChatDialogProps } />
        </div>
    );
}

export default RetrievalPage;
